<template>
  <Card>
    <Button type="primary" @click="showSaveAttr" :disabled="!categoryStore.category3Id">
      <template #icon><PlusOutlined /></template>
      添加属性
    </Button>

    <Table
      :dataSource="attrList"
      :columns="columns"
      :loading="tableLoading"
      :pagination="false"
      rowKey="id"
      bordered
      class="attr-list-table"
    >
      <template #index="{ index }">
        {{ index + 1 }}
      </template>
      <!-- 
        record 遍历行数据
        text 当前logoUrl数据
        index 下标
        record table列信息
       -->
      <template #attrValueList="{ text }">
        <Tag v-for="attrValue in text" :key="attrValue.id" color="blue">
          {{ attrValue.valueName }}
        </Tag>
      </template>

      <template #operator="{ record }">
        <Button type="primary" @click="showUpdateAttr(record)">修改</Button>

        <Popconfirm title="您确认要删除吗？" @confirm="removeAttr(record.id)">
          <template #icon><QuestionCircleOutlined style="color: red" /></template>
          <Button type="primary" danger class="attr-list-btn">删除</Button>
        </Popconfirm>
      </template>
    </Table>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch, defineEmits } from 'vue';
  import { Card, Button, Table, TableColumn, Tag, message, Popconfirm } from 'ant-design-vue';
  import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { useCategoryStore } from '/@/store/modules/category';
  import { getAttrListApi, removeAttrApi } from '/@/api/product/attr';
  import { getAttrListResultModel, Attr } from '/@/api/product/model/attrModel';

  const emits = defineEmits('setIsShowAttrList');
  // 表格数据
  const attrList = ref<getAttrListResultModel>([]);
  // 列
  const columns = [
    {
      // 表格列标题
      title: '序号',
      // 遍历元素key属性
      key: '1',
      // 宽度
      width: 70,
      // 居中
      align: 'center',
      slots: {
        // 插槽的名称
        customRender: 'index',
      },
    },
    {
      title: '属性名',
      // 渲染dataSource中哪个属性
      dataIndex: 'attrName',
      key: '2',
    },
    {
      title: '属性值列表',
      dataIndex: 'attrValueList',
      key: '3',
      slots: {
        // 插槽的名称
        customRender: 'attrValueList',
      },
    },
    {
      title: '操作',
      key: '4',
      slots: {
        // 插槽的名称
        customRender: 'operator',
      },
    },
  ];
  const tableLoading = ref(false);

  // 使用store的category数据
  const categoryStore = useCategoryStore();

  const getAttrList = async (store) => {
    tableLoading.value = true;
    const { category1Id, category2Id, category3Id } = store;
    const res = await getAttrListApi({ category1Id, category2Id, category3Id });
    attrList.value = res;
    tableLoading.value = false;
    message.success('获取属性列表成功');
  };

  watch(
    categoryStore,
    (store) => {
      const { category3Id } = store;

      if (!category3Id) {
        if (attrList.value.length) {
          attrList.value = [];
        }
        return;
      }

      getAttrList(store);
    },
    { immediate: true },
  );

  const showUpdateAttr = (attr: Attr) => {
    emits('setIsShowAttrList', false);
    emits('setAttr', attr);
  };

  const showSaveAttr = () => {
    emits('setIsShowAttrList', false);
    emits('setAttr', {
      attrName: '',
      attrValueList: [],
    });
  };

  const removeAttr = async (id: number) => {
    await removeAttrApi(id);
    getAttrList(categoryStore);
  };
</script>

<style scoped>
  .attr-list-table {
    margin-top: 10px;
  }

  .attr-list-btn {
    margin-left: 10px;
  }
</style>
